<template>
    <div id="userCollect">
        <navbar :title="title"></navbar>
        <div class="placeholder"></div>
        <div class="main-container" v-if="gamesList.length">
            <scroll class="more-list" ref="scroll" 
                :data="gamesList" 
                :scrollY="scrollY" 
                :scrollX="scrollX"
                :bounce="bounce" 
                :pullup="pullup" 
                @scrollToEnd="_getMoreList">
                <div class="game-list">
                    <div class="game-list-wrap">
                        <div class="list-wrap" v-for="item in gamesList" :key="item.id">
                            <div class="item" @click="goDetail(item)">
                                <div class="avator">
                                    <img v-lazy="item.game_icon" alt="">
                                </div>
                                <div class="info">
                                    <div class="desc">
                                    <div class="game_msg">
                                        <div class="name">{{item.gamename}}</div>
                                        <div class="type">{{item.game_type}}</div>
                                    </div>
                                    <div class="label clearfix">
                                        <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name}}</span>
                                        <!-- <span v-for="(label,index) in item.welfare" :key="index" :style="{background:label.color}">{{label.name | labelFilter }}</span> -->
                                    </div>
                                    </div>
                                    <div class="down">
                                        <span>下载</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </scroll>
        </div>
        <!-- 没有数据 -->
        <noData v-else :title="'暂无收藏记录'"></noData>
        <!-- 下拉加载显示 -->
        <div class="loadlist" v-show="gamesList.length">
            <loadinglist :row="row"  :more="more"></loadinglist>
        </div>
        <!-- 初始化页面加载动画 -->
        <div class="loading-wrap" v-show="showLoading">
            <loading></loading>
        </div>
    </div>
</template>

<script>
    import navbar from 'common/navbar'
    import noData from "common/noData"
    import {getCollect} from 'api/game_box.js'
    import Loading from "common/loading"
    import Loadinglist from "common/LoadingList"
    import Scroll from "common/scroll"
    export default {
        data(){
            return{
                title:'我的收藏',
                row: true,     //loading文字水平显示
                isload: false, //是否正在加载
                scrollY: true,  //垂直滚动
                scrollX: false, //水平滚动
                pullup: true,   //上拉加载
                beforeScroll: true,
                bounce: false,  //动画
                more:true,      //下拉加载是否还有更多
                showLoading:true,
                gamesList:[],
                page:1,
            }
        },
        created(){
            this.getList();
        },
        filters:{
            labelFilter(text){
                return text.substr(0,8);
            }
        },
        methods:{
            getList(){
                getCollect(this.page).then(res=>{
                    if(res.data.error==0){
                       this.showLoading=false;
                       this.gamesList=res.data.content.data;
                       let totalPage=res.data.content.totalPage;
                       if(this.page==totalPage){
                            this.more = false;
                            this.isload = true;
                        }
                    }else{
                        this.showLoading=false;
                        this.more = false;
                        this.isload=true;
                    }
                })
            },
            goDetail(item) {
                let id=item.id;
                this.$router.push({
                    path: `/gameDetail/${id}`
                });
            },
            _getMoreList(){
                if (this.isload == true) {
                    return;
                }
                this.page++;
                this.isload = true;
                getCollect(this.page)
                    .then(res => {
                    if (res.data.error == 0) {
                            let totalPage=res.data.content.totalPage;
                            res = res.data.content.data;
                            this.isload = false;
                            this.gamesList = this.gamesList.concat(res);
                            if(this.page==totalPage){
                            this.more = false;
                            this.isload = true;
                        }
                    }
                })
            },
        },
        components:{
            navbar,
            Loading,
            Loadinglist,
            Scroll,
            noData
        }
    }
</script>

<style scoped lang="scss">
   @import '~styles/variable.scss';
   @import '~styles/mixins.scss';
    #userCollect{
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #fff;
        overflow:scroll;
    }
    .placeholder{
        width:100%;
        height:0.8rem;
    }
    .main-container{
        width: 7.5rem;
        margin:0 auto;
        padding-bottom: 0.2rem;
    }
    .game-list{
        padding:0 0.4rem;
    }
    .item {
        display: flex;
        min-height: 1.75rem;
        margin-top: 0.22rem;
        .avator {
        img {
            width: 1.6rem;
            height: 1.6rem;
        }
        }
        .info {
            flex: 1;
            margin-left: 0.16rem;
            display: flex;
            justify-content: space-between;
            padding-bottom: 0.22rem;
            border-bottom: 1px solid #ccced3;
        .desc {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            .name{
            font-size:$font-size-m;
            }
            .type {
            color: #8e8d93;
            }
            .label{
            margin-top:0.1rem;
            span{
                float: left;
                padding: 0.02rem 0.06rem;
                color: #fff;
                margin: 0.02rem;
                border-radius: 4px;
                font-size:9px;
            }
            }
        }
        .down {
            margin-top:0.2rem;
            width: 1.2rem;
            height: 1.2rem;
            line-height:1.2rem;
            text-align: center;
            font-size: 0.3rem;
            color: $color-block;
            border: 1px solid $color-block;
            border-radius: 0.6rem;
        }
        }
        &.item-type1{
        padding: 0 0.4rem;
        }
    }
</style>